<template>
  <div class="table_wrap">
    <!-- 操作栏 -->
    <el-card style="margin-bottom: 6px; padding: 0px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="75px"
        style="margin-bottom: -20px"
      >
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-arrow-left"
            size="mini"
            @click="toBackWork"
          ></el-button>
        </el-form-item>

        <el-form-item label="项目编码" prop="productCode">
          <el-input
            v-model="queryParams.productCode"
            placeholder="请输入项目编码"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item style="float: right">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="openAddDialog"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格数据 -->
    <div class="table_wrap__table">
      <el-table
        :data="tableData"
        style="width: 100%; min-height: 70vh"
        border
        v-loading="loading"
      >
        <el-table-column label="序号" prop="id" />
        <el-table-column label="项目编码" prop="productCode" />
        <!-- <el-table-column label="创建时间" prop="startTime" /> -->
        <el-table-column align="right" label="操作">
          <template #default="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              type="text"
              @click="openEdit(scope.$index, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="table_wrap__table__pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryParams.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pageSize"
          layout="sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      :destroy-on-close="true"
      @close="handleDialogClose"
      top="30vh"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item
          label="项目编码"
          :label-width="formLabelWidth"
          prop="productCode"
        >
          <el-input
            v-model="form.productCode"
            size="small"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleComfirm('form')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTableData,
  deleteTableInfo,
  insertTableInfo,
  updateTableInfo
} from '@/api/work'

export default {
  name: 'HomeView',
  data () {
    return {
      tableData: [], // 表格数据
      loading: true, // 加载动画
      //查询数据
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productCode: null
      },
      dialogFormVisible: false, // 弹窗显示
      // 表单数据
      form: {
        id: '',
        productCode: ''
      },
      formLabelWidth: '120px', // 表单标题
      dialogTitle: '新增', // 新增,编辑
      dialogType: '', // add,edit
      total: null,
      // 表单验证规则
      rules: {
        productCode: [
          { required: true, message: '请输入项目编码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    // 获取表格数据
    this.getTableInfo()
  },
  methods: {
    /**
     * @functionName getTableInfo
     * @param {类型} 参数无
     * @description 获取表格数据
     * @author 蒋友为
     * @date 2024-05-23 22:48:31
     * @version V1.0.0
     * @return
     */
    getTableInfo () {
      this.loading = true // 加载动画
      const params = {
        ...this.queryParams,
        productCode: this.queryParams.productCode || null
      }
      //   console.log(params)
      getTableData(params).then(res => {
        if (res.status === 200) {
          // console.log(res)
          this.total = res.data.size
          this.tableData = res.data.data
          this.loading = false
        }
      })
    },

    /**
     * @functionName handleComfirm
     * @param {类型} 参数
     * @description 确认提交数据
     * @author 蒋友为
     * @date 2024-05-25 14:41:49
     * @version V1.0.0
     * @return
     */
    handleComfirm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = {}
          if (this.dialogType === 'add') {
            const { id, ...rest } = this.form
            data = {
              ...rest
            }
            insertTableInfo(data)
              .then(res => {
                // console.log(res)
                if (res.status === 200) {
                  this.$message.success('新增成功')
                  this.dialogFormVisible = false
                  this.getTableInfo()
                }
                data = {}
              })
              .catch(err => {
                this.$message.error('请检查输入信息是否正确')
              })
          } else if (this.dialogType === 'edit') {
            data = { ...this.form }
            updateTableInfo(data)
              .then(res => {
                // console.log(res)
                data = {}
                if (res.status === 200) {
                  this.$message.success('编辑成功')
                  this.dialogFormVisible = false
                  this.getTableInfo()
                }
              })
              .catch(err => {
                this.$message.error('请检查输入信息是否正确')
              })
          }
        } else {
          return false
        }
      })
    },

    /**
     * @functionName handleDelete
     * @param {类型} 参数
     * @description 删除单条数据
     * @author 蒋友为
     * @date 2024-05-25 15:47:56
     * @version V1.0.0
     * @return
     */
    handleDelete (index, item) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const data = {
            id: item.id
          }
          deleteTableInfo(data)
            .then(res => {
              if (res.status === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.getTableInfo()
              } else {
                this.$message({
                  type: 'error',
                  message: '删除失败!'
                })
              }
            })
            .catch(err => {
              // console.log(err)
              this.$message({
                type: 'error',
                message: '删除失败'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    /**
     * @functionName handleQuery
     * @param {类型} 参数
     * @description 查询数据
     * @author 蒋友为
     * @date 2024-05-25 14:41:27
     * @version V1.0.0
     * @return
     */
    handleQuery () {
      // console.log(this.queryParams)
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getTableInfo()
    },

    /**
     * @functionName resetQuery
     * @param {类型} 参数
     * @description 重置查询条件
     * @author 蒋友为
     * @date 2024-05-25 14:37:10
     * @version V1.0.0
     * @return
     */
    resetQuery () {
      const { pageNum, pageSize, ...rest } = this.queryParams
      Object.keys({ ...rest }).forEach(key => {
        if (this.queryParams[key] === null || this.queryParams[key] === '') {
          return
        }
        this.queryParams[key] = null
        this.getTableInfo()
      })
    },

    /**
     * @functionName openAddDialog
     * @param {类型} 参数
     * @description 打开新增框
     * @author 蒋友为
     * @date 2024-05-25 14:32:48
     * @version V1.0.0
     * @return
     */
    openAddDialog () {
      this.dialogFormVisible = true
      this.dialogTitle = '新增'
      this.dialogType = 'add'
    },

    /**
     * @functionName openEdit
     * @param {类型} 参数
     * @description 打开编辑框
     * @author 蒋友为
     * @date 2024-05-25 14:36:08
     * @version V1.0.0
     * @return
     */
    openEdit (index, item) {
      this.dialogFormVisible = true
      this.dialogTitle = '编辑'
      this.dialogType = 'edit'
      // console.log(item)
      const { updateTime, pageSize, pageNum, createTime, ...rest } = item
      this.form = {
        ...rest
      }
    },

    /**
     * @functionName handleDialogClose
     * @param {类型} 参数
     * @description 关闭弹窗清空数据
     * @author 蒋友为
     * @date 2024-05-25 14:35:16
     * @version V1.0.0
     * @return
     */
    handleDialogClose () {
      Object.keys(this.form).forEach(key => {
        this.form[key] = null
      })
    },

    /**
     * @functionName handleSizeChange
     * @param {类型} 参数
     * @description 改变每页条数
     * @author 蒋友为
     * @date 2024-05-25 14:35:16
     * @version V1.0.0
     * @return
     */
    handleSizeChange (val) {
      this.queryParams.pageSize = val
      this.getTableInfo()
    },

    /**
     * @functionName handleCurrentChange
     * @param {类型} 参数
     * @description 改变当前页
     * @author 蒋友为
     * @date 2024-05-25 14:35:45
     * @version V1.0.0
     * @return
     */
    handleCurrentChange (val) {
      this.queryParams.pageNum = val
      this.getTableInfo()
    },

    toBackWork () {
      this.$router.push({
        path: '/'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.table_wrap {
  padding: 20px;
  background-color: #f6f6f6;

  &__table {
    padding: 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    &__pagination {
      margin: 20px 0 0 auto;
    }
  }
}
</style>
